import { motion } from "motion/react";
import styled from "styled-components";


export const DraggableNode = styled(motion.div)`
  background-color: #14ae5c;
  color: #000;
  border-radius: 2px;
  width: 100%;
  max-width: 170px;
  min-height: 40px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  align-items: center;
  cursor: move;
  border: solid 1px #ccc;

  &.SqlNode {
    background-color: #fff;
    &:hover {
      border-color: #2e74ff;
      border-width: 1px;
      box-shadow: 0 0 3px 3px #2e74ff55;
    }
  }
  &.PreprocessNode {
    background-color: #fff;
    &:hover {
      border-color: #9671ff;
      border-width: 1px;
      box-shadow: 0 0 3px 3px #9671ff55;
    }
  }
  &.TransposeNode, &.UnionNode, &.AggregateNode, &.JoinNode {
    background-color: #fff;
    &:hover {
      border-color: #FFA500;
      border-width: 1px;
      box-shadow: 0 0 3px 3px #FFA50055;
    }
  }
  &.SinkNode, &.PersistNode {
    background-color: #fff;
    &:hover {
      border-color: #45cc67;
      border-width: 1px;
      box-shadow: 0 0 3px 3px #45cc6755;
    }
  }
`;
